<template>
    <div class="rwjk">
        <div class="rwjk-top">
            <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                <el-form-item label="任务名称">
                    <el-input v-model="form.addvnm" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="区域类型">
                    <el-select v-model="form.qylx" placeholder="请选择">
                        <el-option v-for="item in qylx" :key="item.statusname" :label="item.label"
                            :value="item.statusname">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单元名称">
                    <el-cascader :options="dymc" v-model="form.dymc" @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <span class="tiquyuan">
                    <el-form-item label="提取源">
                        <el-select v-model="form.tqy" placeholder="请选择">
                            <el-option v-for="item in tqy" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </span>
                <el-form-item label="提取时段">
                    <el-select v-model="form.tqsd" placeholder="请选择">
                        <el-option v-for="item in tqsd" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="循环周期">
                    <el-select v-model="form.xhzq" placeholder="请选择">
                        <el-option v-for="item in xhzq" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <span class="zhuangtai">
                    <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </span>
            </el-form>
            <div class="top-button">
                <el-button size="default"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
                <el-button size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重 置</el-button>
            </div>
        </div>
        <div class="rwjk-middle">
            <el-table class="tableBox" :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                border stripe height="90%" :row-class-name="tableRowClassName"
                :header-cell-style="{ background: '#b2dffe', color: '#000' }" style="width: 100%">
                <el-table-column type="index" align="center" label="序号" width="50" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="status" align="center" label="状态" width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2"
                            active-color="#02538C" inactive-color="#B9B9B9" @change="changeSwitch(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="addvnm" label="任务名称" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="czsl" label="测站数量" width="90" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="qylx" label="区域类型" width="120" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="dymc" label="单元名称" width="180" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="tqy" label="提取源" width="90" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="xhzq" label="循环周期" width="100" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="tqsd" label="提取时段" width="90" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="zxsj" label="执行时间" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="zxqk" label="执行情况" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <a href="#" @click="xzqkdhk(scope.row)">{{ scope.row.zxqk }}</a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next"
                    :total="tableData.length">
                </el-pagination>
            </div>
        </div>
        <!-- 执行情况对话框 -->
        <el-dialog :visible.sync="dialogVisible" width="80%" :append-to-body="true">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>监测站执行记录查看</span>
                    <!-- <i class="el-icon-circle-close"></i>; -->
                </div>
            </div>
            <div class="center">
                <el-form :model="zxqkform" label-width="110px" :inline="true" size="normal">
                    <el-form-item label="数据生成时间">
                        <el-date-picker v-model="zxqkform.sjscsj" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <span class="zhixzhuangt">
                        <el-form-item label="执行状态">
                            <el-select v-model="zxqkform.ccq" placeholder="请选择">
                                <el-option v-for="item in zxzt" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <el-form-item>
                        <el-button type="primary"> <i class="iconfont icon-sousuo"></i> 查 询</el-button>
                        <el-button type="primary"> <i class="el-icon-refresh"></i> 重 置</el-button>
                    </el-form-item>
                </el-form>
                <el-table class="tableBox"
                    :data="tableData1.slice((currentPage1 - 1) * pagesize1, currentPage1 * pagesize1)" stripe
                    height="80%" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50"> </el-table-column>
                    <el-table-column prop="rwmc" label="任务名称" width="180" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="tqy" label="提取源" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="tqsd" label="提取时段" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="xzsj" label="执行时间" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="sjscsj" label="数据生成时间" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="jhzxsj" label="计划执行时间" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="zxwcsj" label="执行完成时间" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="status" label="执行状态" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="caozuo" label="操作" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-pagination @size-change="dhkymSizeChange" @current-change="dhkymCurrentChange"
                    :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next"
                    :total="tableData1.length">
                </el-pagination>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { qylx } from '@/api/index'
export default {
    data() {
        return {
            // 主页头部表单
            form: {
                addvnm: '',//任务名称输入框
                qylx: '',//区域类型下拉框
                dymc: [],//单元名称级联选择器
                tqy: '',//提取源
                tqsd: '',//提取时段
                xhzq: '',//循环周期下拉框
                status: '',//状态下拉框
            },
            // 底部页码
            pagesize: 11,
            currentPage: 1,
            // 对话框底部页码
            pagesize1: 10,
            currentPage1: 1,
            // 区域类型下拉框数组
            qylx: [],
            // 执行状态下拉框内容
            zxzt: [{
                value: 'success',
                label: '成功'
            }, {
                value: 'fail',
                label: '失败'
            }],
            // 单元名称下拉框数组
            dymc: [{
                value: 'jilin',
                label: '吉林',
                children: [{
                    value: 'changchun',
                    label: '长春市',
                    children: [{
                        label: '南关区',
                        value: 'nanguan'
                    }, {
                        label: '朝阳区',
                        value: 'chaoyang'
                    }, {
                        label: '绿园区',
                        value: 'lvyuan'
                    }, {
                        label: '二道区',
                        value: 'erdao'
                    }, {
                        label: '双阳区',
                        value: 'shuangyang'
                    }, {
                        label: '宽城区',
                        value: 'kuancheng'
                    }, {
                        label: '九台区',
                        value: 'jiutai'
                    }]
                }, {
                    value: 'jilin',
                    label: '吉林市',
                    children: [{
                        label: '永吉县',
                        value: 'yongji'
                    }, {
                        label: '船营区',
                        value: 'chuanying'
                    }]
                }, {
                    value: 'yanbian',
                    label: '延边州',
                    children: [{
                        label: '延吉市',
                        value: 'yanji'
                    }, {
                        label: '图们市',
                        value: 'tumen'
                    }, {
                        label: '敦化市',
                        value: 'dunhua'
                    }, {
                        label: '和龙市',
                        value: 'helong'
                    }]
                }, {
                    value: 'siping',
                    label: '四平市',
                    children: [{
                        label: '铁西区',
                        value: 'tiexi'
                    }, {
                        label: '铁东区',
                        value: 'tiedong'
                    }, {
                        label: '公主岭区',
                        value: 'gongzhuling'
                    }, {
                        label: '梨树县',
                        value: 'lishu'
                    }]
                }, {
                    value: 'tonghus',
                    label: '通化市',
                    children: [{
                        label: '东昌区',
                        value: 'dongchang'
                    }, {
                        label: '二道江区',
                        value: 'erdaojiang'
                    }, {
                        label: '集安市',
                        value: 'jian'
                    }, {
                        label: '通化县',
                        value: 'tonghua'
                    }]
                }, {
                    value: 'baicheng',
                    label: '白城市',
                    children: [{
                        label: '大安市',
                        value: 'daan'
                    }, {
                        label: '通榆县',
                        value: 'tongyu'
                    }]
                }, {
                    value: 'songyuan',
                    label: '松原市',
                    children: [{
                        label: '宁江区',
                        value: 'ningjiang'
                    }, {
                        label: '扶余市',
                        value: 'fuyu'
                    }, {
                        label: '乾安县',
                        value: 'qianan'
                    }]
                }, {
                    value: 'liaoyuan',
                    label: '辽源市',
                    children: [{
                        label: '龙山区',
                        value: 'longshan'
                    }, {
                        label: '西安区',
                        value: 'xian'
                    }, {
                        label: '东丰县',
                        value: 'dongfeng'
                    }, {
                        label: '东辽县',
                        value: 'dongliao'
                    }]
                }, {
                    value: 'baishan',
                    label: '白山市',
                    children: [{
                        label: '浑江区',
                        value: 'hunjiang'
                    }, {
                        label: '江源区',
                        value: 'jiangyuan'
                    }, {
                        label: '临江市',
                        value: 'linjiang'
                    }, {
                        label: '抚松县',
                        value: 'fusong'
                    }]
                }]
            }],
            // 提取源下拉框数组
            tqy: [{
                value: 'shishidata',
                label: '实时数据'
            }, {
                value: 'zhengbiandata',
                label: '整编数据'
            }, {
                value: 'gongxiangdata',
                label: '共享数据'
            }, {
                value: 'jichushuju',
                label: '基础数据'
            }, {
                value: 'pingjiadata',
                label: '评价数据'
            }],
            // 提取时段下拉框数组
            tqsd: [{
                value: 'ri',
                label: '日'
            }, {
                value: 'yue',
                label: '月'
            }, {
                value: 'ji',
                label: '季'
            }, {
                value: 'nian',
                label: '年'
            }, {
                value: 'qita',
                label: '其他'
            }],
            // 循环周期下拉框数组
            xhzq: [{
                value: 'zqxh',
                label: '周期循环'
            }, {
                value: 'dcxh',
                label: '单次循环'
            }],
            // 状态下拉框数组
            status: [{
                value: 'kaiqi',
                label: '开启'
            }, {
                value: 'guanbi',
                label: '关闭'
            }],
            // 主页表格内容
            tableData: [{
                status: 1,
                addvnm: '松原市扶余县66个测站实时数据日提取任务',//任务名称
                czsl: '66',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行100次，其中成功100次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县51个测站整编数据月提取任务',//任务名称
                czsl: '51',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月1日10:00',//执行时间,
                zxqk: '已执行20次，其中成功18次，失败2次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县等36个测站实时数据年提取任务',//任务名称
                czsl: '36',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县、宁江区',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '年',//提取时段
                zxsj: '次年7月30日22:00',//执行时间,
                zxqk: '已执行5次，其中成功4次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县28个测站整编数据季提取任务',//任务名称
                czsl: '28',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '季',//提取时段
                zxsj: '5月15日22:00',//执行时间,
                zxqk: '已执行15次，其中成功13次，失败2次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县17个测站共享数据月提取任务',//任务名称
                czsl: '17',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '共享数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月1日10:00',//执行时间,
                zxqk: '已执行15次，其中成功12次，失败3次',//执行情况
            }, {
                status: 1,
                addvnm: '辽源市东辽县53个测站基础数据日提取任务',//任务名称
                czsl: '53',//测站数量
                qylx: '行政区',//区域类型
                dymc: '辽源市东辽县',//单元名称
                tqy: '基础数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行150次，其中成功132次，失败18次。',//执行情况
            }, {
                status: 1,
                addvnm: 'ppp平原区69个测站整编数据月提取任务',//任务名称
                czsl: '69',//测站数量
                qylx: '平原区',//区域类型
                dymc: 'ppp平原区',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月10日10:00',//执行时间,
                zxqk: '已执行26次，其中成功26次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '白山市靖宇县25个测站实时数据月提取任务',//任务名称
                czsl: '25',//测站数量
                qylx: '行政区',//区域类型
                dymc: '白山市靖宇县',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行31次，其中成功30次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: 'xxx平原区38个测站基础数据月提取任务',//任务名称
                czsl: '38',//测站数量
                qylx: '平原区',//区域类型
                dymc: 'xxx平原区',//单元名称
                tqy: '基础数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行56次，其中成功55次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: 'xx水文地质单元29个测站整编数据年提取任务',//任务名称
                czsl: '29',//测站数量
                qylx: '水文地质单元',//区域类型
                dymc: 'xx水文地质单元',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '年',//提取时段
                zxsj: '次年3月15日22:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次',//执行情况
            }, {
                status: 1,
                addvnm: 'ggg管控区36个测站实时数据日提取任务',//任务名称
                czsl: '36',//测站数量
                qylx: '管控区',//区域类型
                dymc: 'ggg管控区',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行213次，其中成功201次，失败12次。',//执行情况
            }, {
                status: 1,
                addvnm: 'yyy超采区58个测站整编数据月提取任务',//任务名称
                czsl: '58',//测站数量
                qylx: '超采区',//区域类型
                dymc: 'yyy超采区',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月10日10:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次',//执行情况
            }, {
                status: 1,
                addvnm: '通化市梅河口市71个测站共享数据月提取任务',//任务名称
                czsl: '71',//测站数量
                qylx: '行政区',//区域类型
                dymc: '通化市梅河口市',//单元名称
                tqy: '共享数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行17次，其中成功17次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '93个测站整编数据x月x日-y月y日提取任务',//任务名称
                czsl: '93',//测站数量
                qylx: '行政区',//区域类型
                dymc: '',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: 'x月x日-y月y日',//提取时段
                zxsj: '(y+1)月z日20:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '62个测站整编数据m月m日-n月n日提取任务',//任务名称
                czsl: '62',//测站数量
                qylx: '行政区',//区域类型
                dymc: '',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: 'm月m日-n月n日',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县66个测站实时数据日提取任务',//任务名称
                czsl: '66',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行100次，其中成功100次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县51个测站整编数据月提取任务',//任务名称
                czsl: '51',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月1日10:00',//执行时间,
                zxqk: '已执行20次，其中成功18次，失败2次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县等36个测站实时数据年提取任务',//任务名称
                czsl: '36',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县、宁江区',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '年',//提取时段
                zxsj: '次年7月30日22:00',//执行时间,
                zxqk: '已执行5次，其中成功4次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县28个测站整编数据季提取任务',//任务名称
                czsl: '28',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '季',//提取时段
                zxsj: '5月15日22:00',//执行时间,
                zxqk: '已执行15次，其中成功13次，失败2次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县17个测站共享数据月提取任务',//任务名称
                czsl: '17',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '共享数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月1日10:00',//执行时间,
                zxqk: '已执行15次，其中成功12次，失败3次',//执行情况
            }, {
                status: 1,
                addvnm: '辽源市东辽县53个测站基础数据日提取任务',//任务名称
                czsl: '53',//测站数量
                qylx: '行政区',//区域类型
                dymc: '辽源市东辽县',//单元名称
                tqy: '基础数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行150次，其中成功132次，失败18次。',//执行情况
            }, {
                status: 1,
                addvnm: 'ppp平原区69个测站整编数据月提取任务',//任务名称
                czsl: '69',//测站数量
                qylx: '平原区',//区域类型
                dymc: 'ppp平原区',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月10日10:00',//执行时间,
                zxqk: '已执行26次，其中成功26次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '白山市靖宇县25个测站实时数据月提取任务',//任务名称
                czsl: '25',//测站数量
                qylx: '行政区',//区域类型
                dymc: '白山市靖宇县',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行31次，其中成功30次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: 'xxx平原区38个测站基础数据月提取任务',//任务名称
                czsl: '38',//测站数量
                qylx: '平原区',//区域类型
                dymc: 'xxx平原区',//单元名称
                tqy: '基础数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行56次，其中成功55次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: 'xx水文地质单元29个测站整编数据年提取任务',//任务名称
                czsl: '29',//测站数量
                qylx: '水文地质单元',//区域类型
                dymc: 'xx水文地质单元',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '年',//提取时段
                zxsj: '次年3月15日22:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次',//执行情况
            }, {
                status: 1,
                addvnm: 'ggg管控区36个测站实时数据日提取任务',//任务名称
                czsl: '36',//测站数量
                qylx: '管控区',//区域类型
                dymc: 'ggg管控区',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行213次，其中成功201次，失败12次。',//执行情况
            }, {
                status: 1,
                addvnm: 'yyy超采区58个测站整编数据月提取任务',//任务名称
                czsl: '58',//测站数量
                qylx: '超采区',//区域类型
                dymc: 'yyy超采区',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月10日10:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次',//执行情况
            }, {
                status: 1,
                addvnm: '通化市梅河口市71个测站共享数据月提取任务',//任务名称
                czsl: '71',//测站数量
                qylx: '行政区',//区域类型
                dymc: '通化市梅河口市',//单元名称
                tqy: '共享数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行17次，其中成功17次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '93个测站整编数据x月x日-y月y日提取任务',//任务名称
                czsl: '93',//测站数量
                qylx: '行政区',//区域类型
                dymc: '',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: 'x月x日-y月y日',//提取时段
                zxsj: '(y+1)月z日20:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '62个测站整编数据m月m日-n月n日提取任务',//任务名称
                czsl: '62',//测站数量
                qylx: '行政区',//区域类型
                dymc: '',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: 'm月m日-n月n日',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县66个测站实时数据日提取任务',//任务名称
                czsl: '66',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行100次，其中成功100次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县51个测站整编数据月提取任务',//任务名称
                czsl: '51',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月1日10:00',//执行时间,
                zxqk: '已执行20次，其中成功18次，失败2次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县等36个测站实时数据年提取任务',//任务名称
                czsl: '36',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县、宁江区',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '年',//提取时段
                zxsj: '次年7月30日22:00',//执行时间,
                zxqk: '已执行5次，其中成功4次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县28个测站整编数据季提取任务',//任务名称
                czsl: '28',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '季',//提取时段
                zxsj: '5月15日22:00',//执行时间,
                zxqk: '已执行15次，其中成功13次，失败2次。',//执行情况
            }, {
                status: 1,
                addvnm: '松原市扶余县17个测站共享数据月提取任务',//任务名称
                czsl: '17',//测站数量
                qylx: '行政区',//区域类型
                dymc: '松原市扶余县',//单元名称
                tqy: '共享数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月1日10:00',//执行时间,
                zxqk: '已执行15次，其中成功12次，失败3次',//执行情况
            }, {
                status: 1,
                addvnm: '辽源市东辽县53个测站基础数据日提取任务',//任务名称
                czsl: '53',//测站数量
                qylx: '行政区',//区域类型
                dymc: '辽源市东辽县',//单元名称
                tqy: '基础数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行150次，其中成功132次，失败18次。',//执行情况
            }, {
                status: 1,
                addvnm: 'ppp平原区69个测站整编数据月提取任务',//任务名称
                czsl: '69',//测站数量
                qylx: '平原区',//区域类型
                dymc: 'ppp平原区',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月10日10:00',//执行时间,
                zxqk: '已执行26次，其中成功26次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '白山市靖宇县25个测站实时数据月提取任务',//任务名称
                czsl: '25',//测站数量
                qylx: '行政区',//区域类型
                dymc: '白山市靖宇县',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行31次，其中成功30次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: 'xxx平原区38个测站基础数据月提取任务',//任务名称
                czsl: '38',//测站数量
                qylx: '平原区',//区域类型
                dymc: 'xxx平原区',//单元名称
                tqy: '基础数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行56次，其中成功55次，失败1次。',//执行情况
            }, {
                status: 1,
                addvnm: 'xx水文地质单元29个测站整编数据年提取任务',//任务名称
                czsl: '29',//测站数量
                qylx: '水文地质单元',//区域类型
                dymc: 'xx水文地质单元',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '年',//提取时段
                zxsj: '次年3月15日22:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次',//执行情况
            }, {
                status: 1,
                addvnm: 'ggg管控区36个测站实时数据日提取任务',//任务名称
                czsl: '36',//测站数量
                qylx: '管控区',//区域类型
                dymc: 'ggg管控区',//单元名称
                tqy: '实时数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '日',//提取时段
                zxsj: '次日10:00',//执行时间,
                zxqk: '已执行213次，其中成功201次，失败12次。',//执行情况
            }, {
                status: 1,
                addvnm: 'yyy超采区58个测站整编数据月提取任务',//任务名称
                czsl: '58',//测站数量
                qylx: '超采区',//区域类型
                dymc: 'yyy超采区',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: '月',//提取时段
                zxsj: '次月10日10:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次',//执行情况
            }, {
                status: 1,
                addvnm: '通化市梅河口市71个测站共享数据月提取任务',//任务名称
                czsl: '71',//测站数量
                qylx: '行政区',//区域类型
                dymc: '通化市梅河口市',//单元名称
                tqy: '共享数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: '--',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行17次，其中成功17次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '93个测站整编数据x月x日-y月y日提取任务',//任务名称
                czsl: '93',//测站数量
                qylx: '行政区',//区域类型
                dymc: '',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '周期循环',//循环周期
                tqsd: 'x月x日-y月y日',//提取时段
                zxsj: '(y+1)月z日20:00',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次。',//执行情况
            }, {
                status: 1,
                addvnm: '62个测站整编数据m月m日-n月n日提取任务',//任务名称
                czsl: '62',//测站数量
                qylx: '行政区',//区域类型
                dymc: '',//单元名称
                tqy: '整编数据',//提取源
                xhzq: '单次循环',//循环周期
                tqsd: 'm月m日-n月n日',//提取时段
                zxsj: '2022/11/1',//执行时间,
                zxqk: '已执行6次，其中成功6次，失败0次。',//执行情况
            }],
            currentPage1: 1,
            // 查看对话框
            dialogVisible: false,
            zxqkform: {
                sjscsj: '',//数据生成时间
                status: '',//执行状态
            },
            tableData1: [{
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '月',//提取时段
                xzsj: '次月1日10:00',//执行时间
                sjscsj: '2022/11/1 10:00:00',//数据生成时间
                jhzxsj: '2022/11/1 10:00:00',//计划执行时间
                zxwcsj: '2022/11/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/10/1 10:00:00',//数据生成时间
                jhzxsj: '2022/10/1 10:00:00',//计划执行时间
                zxwcsj: '2022/10/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/9/1 10:00:00',//数据生成时间
                jhzxsj: '2022/9/1 10:00:00',//计划执行时间
                zxwcsj: '2022/9/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/8/1 10:00:00',//数据生成时间
                jhzxsj: '2022/8/1 10:00:00',//计划执行时间
                zxwcsj: '2022/8/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '-----',//数据生成时间
                jhzxsj: '2022/7/1 10:00:00',//计划执行时间
                zxwcsj: '-----',//执行完成时间
                status: '失败',//完成状态
                caozuo: "重新执行",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/6/1 10:00:00',//数据生成时间
                jhzxsj: '2022/6/1 10:00:00',//计划执行时间
                zxwcsj: '2022/6/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/5/1 10:00:00',//数据生成时间
                jhzxsj: '2022/5/1 10:00:00',//计划执行时间
                zxwcsj: '2022/5/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/4/1 10:00:00',//数据生成时间
                jhzxsj: '2022/4/1 10:00:00',//计划执行时间
                zxwcsj: '2022/4/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/3/1 10:00:00',//数据生成时间
                jhzxsj: '2022/3/1 10:00:00',//计划执行时间
                zxwcsj: '2022/3/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '-----',//数据生成时间
                jhzxsj: '2022/2/1 10:00:00',//计划执行时间
                zxwcsj: '-----',//执行完成时间
                status: '失败',//完成状态
                caozuo: "重新执行",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/2/1 10:00:00',//数据生成时间
                jhzxsj: '2022/2/1 10:00:00',//计划执行时间
                zxwcsj: '2022/2/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2022/1/1 10:00:00',//数据生成时间
                jhzxsj: '2022/1/1 10:00:00',//计划执行时间
                zxwcsj: '2022/1/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            }, {
                rwmc: '松原市扶余县等36测站实时数据年提取任务',//任务名称
                tqy: '实时数据',//提取源
                tqsd: '日',//提取时段
                xzsj: '10时',//执行时间
                sjscsj: '2021/11/1 10:00:00',//数据生成时间
                jhzxsj: '2021/11/1 10:00:00',//计划执行时间
                zxwcsj: '2021/11/1 10:00:00',//执行完成时间
                status: '成功',//完成状态
                caozuo: "",//操作
            },]

        }
    },
    mounted() {
        this.qylxobj();//获取区域类型
    },
    methods: {
        // 获取区域类型
        async qylxobj() {
            const govern_type = "area_type"
            const res = await qylx(govern_type)
            // console.log(res);//200
            this.qylx = res.data.data
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 表格的隔行颜色改变
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'statistiss-row'
            } else {
                return ''
            }
        },
        // 级联选择器的变化
        handleChange(value) {
            // console.log(value);
        },
        // 重置
        chongzhi() {

        },
        // 状态的切换接口对接
        changeSwitch(row) {
            console.log(row);
            // const data = {
            //     id: row.id,
            //     status: row.status,
            // };
            // this.$api.accountSwitch(data).then(res => {
            //     if (res.code === '200' || res.code === 200) {
            //         // 调用表格数据
            //         this.getTableData();
            //     } else {
            //         this.$message.error(res.msg);
            //         // 调用表格数据
            //         this.getTableData();
            //     }
            //     this.loading = false;
            // }).catch({

            // });
        },
        //执行情况对话框
        xzqkdhk(row) {
            console.log(row);
            this.dialogVisible = true
        },
        dhkymSizeChange() {

        },
        dhkymCurrentChange() {

        }
    }
}
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}

.rwjk {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    ::v-deep .rwjk-top {
        width: 97%;
        height: 10%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .el-form {
            width: 86.7%;
            height: 100%;
            /* border: 1px solid red; */
            box-sizing: border-box;

            .el-form-item {
                padding-top: .625rem;
                padding-right: .5rem;
                margin-right: 0;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;

                    .el-input {
                        width: 5.9375rem;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }
            }
        }

        .top-button {
            width: 13.3%;
            height: 100%;
            padding-top: 10px;
            /* border: 1px solid red; */
            box-sizing: border-box;

            .el-button {
                background-color: #0055ab;
                color: #fff;

                .iconfont {
                    font-size: 14px;
                }
            }
        }
    }

    ::v-deep .rwjk-middle {
        width: 97%;
        height: 90%;
        margin: 0 auto;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .el-table {
            width: 100%;
            height: 90%;
            background-color: rgb(243, 243, 243);
            padding-top: 10px;

            .el-table__header-wrapper {}

            .el-table__body-wrapper {
                .el-icon-download:before {
                    font-size: 18px;
                }
            }
        }

        .bottom {
            width: 100%;
            height: 10%;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 6%;
            }
        }
    }

    ::v-deep .ssdhk {
        .el-dialog {
            height: 90%;

            .el-dialog__header {
                width: 100%;
                height: 10%;

                .dialog-title {
                    text-align: center;
                    font-weight: bold;
                    font-size: 40px;
                    color: rgb(51, 51, 51);

                    .button-right {
                        span {
                            color: #0055ab;
                        }
                    }
                }
            }

            .el-dialog__body {
                width: 100%;
                height: 85%;

                .center {
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;

                    .el-table {
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                    }
                }
            }

            .el-dialog__footer {
                width: 100%;
                height: 5%;
            }
        }
    }
}

/* 控制top表单的宽度 */
/deep/.rwjk-top .el-input {
    width: 5.9375rem !important;

    .el-input__inner {
        width: 100%;
    }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: .375rem; // 横向滚动条
    height: .125rem; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}

/* 表格的行高 */
/deep/ .tableBox {
    th {
        padding: 0 !important;
        height: 3.125rem;
        line-height: 3.125rem;
    }

    td {
        padding: 0 !important;
        height: 2.5rem;
        line-height: 2.5rem;
    }
}


// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
    background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
    color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
    color: #000;
}

/* 查看对话框标题的大小和颜色 */
/deep/ .dialog-title {
    .button-right {
        span {
            font-size: 1.25rem;
            color: #0055ab;
        }
    }
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
    background-color: #f2faff;
}

/* @media all and (max-width:720px) and (min-width:320px) {

    body {

        background-color: red;

    }

    @media all and (max-width:320px) {

        body {

            background-color: blue;

        }

    }
} */
/* 去掉滚动条上方的小方块背景色 */
/deep/ .el-table--border th.el-table__cell.gutter:last-of-type {
    background: rgb(243, 243, 243);
    border: none;
}

/* 对话框样式 */
/deep/ .el-dialog {
    width: 80%;
    height: 72%;
    box-sizing: border-box;

    .el-dialog__header {
        padding-bottom: 1.25rem;
        background-color: #eee;
        height: 12%;
        box-sizing: border-box;

    }

    /* 查看对话框标题的大小和颜色 */
    .dialog-title {
        .button-right {
            span {
                font-size: 1.25rem;
                color: #0055ab;
            }
        }
    }

    .el-dialog__body {
        width: 100%;
        height: 73%;
        padding: 0 20px;
        box-sizing: border-box;
        box-sizing: border-box;

        .center {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            margin-top: 10px;

            .el-form {
                width: 100%;
                height: 10%;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;

                    .el-input {
                        width: 5.9375rem;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }

                .el-button {
                    background-color: #0055ab;
                    color: #fff;
                }
            }

            .el-table {
                width: 100%;
                height: 90%;
                box-sizing: border-box;
                margin-top: 10px;
            }
        }
    }

    /* 查看对话框底部下载按钮 */
    .el-dialog__footer {
        width: 100%;
        height: 15%;
        text-align: center;
        box-sizing: border-box;

        .el-pagination {
            position: absolute;
            bottom: 3%;
            right: 6%;
        }
    }
}

/* 提取源宽度 */
/deep/ .tiquyuan {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 4.375rem !important;
            /* text-align: center !important; */
        }
    }
}

/* 状态宽度 */
/deep/ .zhuangtai {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 3.25rem !important;
            /* text-align: center !important; */
        }
    }
}

/* 执行状态宽度 */
/deep/ .zhixzhuangt {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 5.3125rem !important;
            /* text-align: center !important; */
        }
    }
}
</style>